<template>
     <div class="amap-wrap">
        <el-amap vid="amapContainer" :events="events" class="amap-demo" :zoom="zoom" :amap-manager="amapManager" :center="center">
             <!-- 覆盖物圆 -->
            <el-amap-circle 
            v-for="item in circle"
            :key="item.id"
            :center="item.center" 
            :radius="item.radius" 
            :fillColor="item.color" 
            :strokeColor="item.color" 
            :strokeOpacity="item.strokeOpacity" 
            :strokeWeight="item.strokeWeight">
            </el-amap-circle>
            <!-- 覆盖物圆 门店信息  offset="text.offset"-->
            <el-amap-marker v-for="(item,index) in parking" :key="item.id" :content="item.content" :position="item.position" :vid="index" ></el-amap-marker>
            <el-amap-text  v-for="text in parkingCarsNumber" :key="text.id" :text="text.text" :offset="text.offset" :position="text.position"></el-amap-text>
        </el-amap>
        <!-- :amap-manager="amapManager" :center="center"  
​​
        蜗牛学院R: 104.06081 30.57609-->
        
    </div>
</template>

<script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap';
// 方法
let amapManager=new AMapManager();
// 方法地图方法导入
import { getLngLat } from "./common";
export default {
    name: "Amap",
    data(){
        const _this=this;
        return {
            // 经纬度
            map: null,
            amapManager,
            center:[104.06081,30.57609],
            zoom: 3,
            events: {
                init(o){
    
            lazyAMapApiLoaderInstance.load().then(() => {
            _this.initMap();
                
            });  
                }
            },
            circle:[
                {
                     center:[0,0],
                     radius:"4" ,
                     color:"#FF0000",
                     strokeOpacity:"0.5" ,
                     strokeWeight:"30"

                },
        
            ],
            parking:[
                // {
                //     id:1,
                //     content:"<img src='"+require('@/images/car.png')+"' />",
                //     position:[104.06081,30.59609]
                // },
                // {
                //     id:2,
                //     content:"<img src='"+require('@/images/car.png')+"' />",
                //     position:[104.1565424372598,30.677667651702343]
                // },
                // {
                //     id:3,
                //     content:"<img src='"+require('@/images/car.png')+"' />",
                //     position:[104.02268596723346,30.672079150665734]
                // },
                // {
                //     id:4,
                //     content:"<img src='"+require('@/images/car.png')+"' />",
                //     position:[104.07321584358176,30.72099766302973]
                // },
            ],
            parkingCarsNumber:[
                // {
                //    id:1,
                //    text:"5", 
                //    offset:[25,-30], 
                //    position:[104.06081,30.59609]

                // },
                // {
                //    id:2,
                //    text:"5", 
                //    offset:[25,-30], 
                //     position:[104.1565424372598,30.677667651702343]

                // },
                // {
                //    id:3,
                //    text:"5",
                //    offset:[25,-30],  
                //     position:[104.02268596723346,30.672079150665734]

                // },
                // {
                //    id:4,
                //    text:"5", 
                //    offset:[25,-30], 
                //     position:[104.07321584358176,30.72099766302973]

                // },

            ],
        }
    },
    mounted(){
        // lazyAMapApiLoaderInstance //为了加载高德地图的API
        // lazyAMapApiLoaderInstance.load().then(() => {
        //     this.map=new AMap.Map('amapContainer',{
        //         center:new AMap.lnglat(),
        //         zoom:this.zoom,//初始化地图层级
        //     });
                
        //     });
        // this.map.on("click",function(e){
        //    console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat());
        // });
        
    },
    methods:{
        initMap(){
            const _this=this;
            this.map=amapManager.getMap();
            // let marker=new AMap.Marker({
            //   position:[104.07274727,30.57899372]
            // });
            // marker.setMap(this.map);
            // console.log(this.map);
            // 浏览器定位
         var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：5s
            buttonPosition:'RB',    //定位按钮的停靠位置
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
              markerOptions:{
              content:""
          }
        });
        this.map.addControl(geolocation);
        geolocation.getCurrentPosition((status,result)=>{
            if(status=='complete'){
            const lng=result.position.lng;
            const lat=result.position.lat;
            this.circle[0].center=[lng,lat];
            }else{
                
            }
        });
        this.map.on("click",function(e){
            // console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat());
            const lonlag =getLngLat(e);
            _this.$emit("lonlag",lonlag);
            // console.log(lonlag);
         });
        }
    }
    
   
}

</script>

<style ass="scss" scoped>
.amap-wrap { height:100%;}
</style>